<template>
	<view class="container">
		<div class="userlist mgb300">
			<div class="item" v-for="(item,index) in showImg" :key="index" @click="toDetail(item)">
				<div class="imgBg" :style="{'background-image': 'url(' + imgLink + '' + item.filename + ')'}"></div>
				<!-- <image :src="imgLink + '' + item.filename" mode="widthFix"></image> -->
			</div>
			
			<div class="addItem"  @click='chooseImage()'>
				<u-icon name="plus-circle" color="#cccccc" size="100"></u-icon>
			</div>
		</div>
		
		<div class="bulletBox" :style="{'opacity': opcity / 100}">
			<!-- <lff-barrage ref="lffBarrage"></lff-barrage> -->
			<div class="bullet-item" v-for="(item,index) in showingBullets" :key="index" :data-line="item.line">
				<div class="box">
					<div class="msg">
						{{item.msg}}
					</div>
				</div>
			</div>
		</div>
		
		<div class="inpBox">
			<div class="container">
				
				<u-slider v-model="opcity" step="5" min="10" max="100" :showValue="true" :activeColor="'#f56c6c'" :blockColor="'#f56c6c'"></u-slider>
				<div class="inp">
					<div class="textBox">
						<u--textarea placeholder="请输入你想说的话" border="surround" v-model="msg"></u--textarea>
					</div>
					<div class="btn">
						<u-button type="error" icon="share-square" text="发表" @click="send()"></u-button>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	const db = wx.cloud.database()
	export default {
		name: 'headcomd',
		data() {
			return {
				userid: '',
				imglist: [],
				imgLink: 'https://www.baixuemianshi.com/zhuanti/upload_img/upload/',
				
				showPrivacy:false,
				imgs: [],
				opcity: 100,
				
				msg: "",
				dmList:[],
				showingBullets:[],
				lines: 7,
				currentLine: 1,
				isInfinite: true,
				durTime: 600
			};
		},
		onShareAppMessage(options) {},
		onLoad(options) {
			this.userid = options.userid
			
			if (wx.getPrivacySetting) {
				wx.getPrivacySetting({
					success: res => {
						if (res.needAuthorization) {
							// 需要弹出隐私协议
							this.showPrivacy = true
						} else {
							// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
							// wx.getUserProfile()
							// wx.chooseMedia()
							// wx.getClipboardData()
							// wx.startRecord()
						}
					},
					fail: () => {},
					complete: () => {}
				})
			}
		},
		computed: {
			showImg(){
				let that = this
				let imgs = that.imglist.filter(item => item.spell == that.userid)
				return imgs
			}
			
		},
		mounted() {
			let that = this
			that.getdm()
			
			const timer = setInterval(that.showNextBullet, that.durTime);
			// const rTimer = setInterval(that.removeBullet,7000)
			that.$once("hook:beforeDestroy", () => {
			    clearInterval(timer);
			});
		},
		created() {
			let that = this;
			this.getImgList()

		},
		methods: {
			handleAgreePrivacyAuthorization() {
				this.showPrivacy = false
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			},
			getImgList(){
				let that = this
				wx.cloud.callFunction({
					name: 'get',
					data: {
						fncname: "nbhd_photowall_holidys"
					},
					complete: res => {
						that.imglist = res.result.data
					}
				});
			},
			toDetail(item){
				let that = this
				let imgList = that.showImg.map(item => {
					return that.imgLink + '' + item.filename
				})
				wx.previewImage({
					urls: imgList, //需要预览的图片http链接列表，注意是数组
					current: that.imgLink + '' + item.filename, // 当前显示图片的http链接，默认是第一个
					showmenu:true,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
				// uni.navigateTo({
				// 	url: './detail?imgid=' + item._id
				// })
			},
			chooseImage() {
				var that = this;
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePaths = res.tempFilePaths
						that.imgs = tempFilePaths
						that.upLoadImage()
						
					},
					fail:function(req){
						console.log(req)
					}
				})
			},
			upLoadImage() {
				let that = this
				wx.showLoading({
					title: '图片上传中',
				})
				wx.uploadFile({
					url: 'https://www.baixuemianshi.com/zhuanti/upload_img/xcx.php', //仅为测试地址，填写你的url即可
					filePath: that.imgs[0],
					name: 'file',
					success: function(res) {
						if (res.statusCode == 200) {
							console.log("上传成功！")
							that.addPath(that.imgs[0])
						}
					},
					error: function(res) {
						console.log("上传失败!")
					},
				})
				wx.hideLoading();
			},
			addPath(tempFilePaths){
				let that = this
				let path = tempFilePaths.split('tmp/')[1]
				db.collection('nbhd_photowall_holidys').add({
					data:{
						filename: path,
						holidy: that.userid,
						spell: that.userid
					},
					success: function(res){
						that.getImgList()
					}
				})
			},
			send(){
				let that = this
				if(that.msg == ""){
					uni.showToast({
						icon:'fail',
						title: "请输入内容"
					})
					return
				}
				db.collection("nbhd_photo_dms").add({
					data:{
						msg: that.msg,
						userid: that.userid
					},
					success: function(res){
						uni.showToast({
							icon:'success',
							title: "发表成功"
						})
						const newBullet = {
						    msg: that.msg,
							userid: that.userid
						};
						that.dmList.push(newBullet);
						that.msg = ""
					}
				})
			},
			getdm(){
				let that = this
				wx.cloud.callFunction({
					name: 'get_dms',
					data: {
						fncname: "nbhd_photo_dms",
						userid: that.userid
					},
					complete: res => {
						console.log(res)
						if(res.result){
							that.dmList = res.result.data
						}
						
						// if(that.dmList.length < 7){
						// 	that.lines = 4
						// }
						if(that.dmList.length > 0){
							that.showNextBullet();
						}
						
					}
				});
			},
			showNextBullet() {
			    if (!this.dmList.length) {
					return;
			    }
			    this.currentLine = (this.currentLine % this.lines) + 1;
				const currentBullet = this.dmList.shift();
				this.isInfinite && this.dmList.push({
					_openid: currentBullet._openid,
					ava: currentBullet.ava,
					msg: currentBullet.msg,
					line: 0
				});
				currentBullet.line = this.currentLine;
				let arr = this.showingBullets
				arr.push(currentBullet)
				if(arr > 30){
					arr.shift()
				}
				this.showingBullets = arr
				
			},

		}
	};
</script>

<style>
	@import url("./index.css");
</style>